<template>
  <div>
    <el-select v-model="prov"  @change="changeProv" placeholder="省">
      <el-option
       v-for='item in firstArr' :key='item'
       :value='item'
        >
       {{item}}
      </el-option>
    </el-select>--
    <el-select v-model="city"  @change="changeCity" :placeholder="shi">
      <el-option v-for='i in secondArr' :key='i' :value='i'>
           {{i}}
      </el-option>
    </el-select>--
    <el-select v-model="district"  
      @change="changeDistrict" 
      :placeholder="xian">
      <el-option  v-for='ite in thirdArr' :key='ite' :value='ite'>
       {{ite}}
      </el-option>
    </el-select>
  </div>
</template>
<script>
import getCity from "@/city/getCity"
import {onMounted,ref} from 'vue'
export default {
  setup(){
onMounted(()=>{
  result();
})
 const result =async()=>{
          const res = await getCity.getCityData()
          array.value = res.data;
          firstArr.value = res.data.map(el=>el.name)
 }
 const array = ref([]);
 const shi = ref('市');
 const xian = ref('县/区')
const prov = ref('');
const city = ref('');
const arr1 = ref();
const arr2 =ref();
const firstArr = ref([]);
const secondArr = ref([]);
const thirdArr =ref([]);
const district = ref('');
const changeProv=(val)=>{
  arr1.value = array.value.filter(el=> el.name === val)
  console.log(arr1.value);
  secondArr.value=arr1.value[0].city.map(el=>el.name)
  shi.value = secondArr.value[0];
  city.value="";
  district.value = ''
}
const changeCity=(val)=>{
  arr2.value =  arr1.value[0].city.filter(el=>el.name === val)
  thirdArr.value = arr2.value[0].area
  console.log(thirdArr.value);
   xian.value = thirdArr.value[0];
   district.value = ''
}
return {
  firstArr,
  prov,
  changeProv,
  secondArr,
  city,
 shi,
 changeCity,
 xian,
 district,
 thirdArr
  }
  }
};
</script>
<style lang="less" scoped>
.el-select{
  width:120px;
}
</style>
          
